<template>
  <div class="app-container">
    <div class="custom_card_0">
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form size="small" :inline="true">
            <el-form-item>
              <el-select
                v-model="queryParams.storeId"
                clearable
                size="small"
                placeholder="门店筛选"
              >
                <el-option
                  v-for="item in storeOptions"
                  :key="item.applicableUnitNo"
                  :label="item.applicableUnit"
                  :value="item.applicableUnitNo"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="small"
                @click="getModelMarketing"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <div class="custom_card">
      <el-row :gutter="15">
        <el-col :span="24" style="margin-top: 10px">
          <MmvTitle title="车型营销"> </MmvTitle>
        </el-col>
        <el-col :span="24">
          <MmvTitleSmall
            title="车型标签数据洞察"
            style="margin-bottom: 40px; top: 20px"
          ></MmvTitleSmall>
        </el-col>
        <el-col :span="7">
          <el-card class="box-card" style="width: 100%">
            <el-row>
              <el-col :span="24" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">
                  出租率高车型
                </div>
              </el-col>
              <el-col :span="24" style="margin-bottom: 10px">
                <div class="cardTitle" :title="title1">
                  近{{ modelMarketing.rentDayNum }}天出租率高车型
                </div>
              </el-col>
                <el-col :span="6" style="margin-bottom: 10px; font-size: 30px"
                >{{ modelMarketing.rentModelNum }}款
              </el-col>
              <el-col :span="6" :offset="12" style="margin-bottom: 10px">
                <el-button @click="drawer(6)" type="text"> 查看车型 </el-button>
              </el-col>
             
              
              <el-col :span="24">
                <el-divider></el-divider>
              </el-col>
              <el-col :span="24">
                <el-button @click="historical(9)">历史活动</el-button>
                <el-button
                  type="primary"
                  style="float: right"
                  @click="addActivity(9)"
                  >创建营销活动</el-button
                >
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="7" :offset="1">
          <el-card class="box-card" style="width: 100%">
            <el-row>
              <el-col :span="24" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">闲置车辆</div>
              </el-col>
              <div class="cardTitle" :title="title2">
                近{{ modelMarketing.idleDayNum }}天闲置车辆
              </div>
              <el-col :span="6" style="margin-bottom: 10px; font-size: 30px"
                >{{ modelMarketing.idleCarNum }}辆</el-col
              >
              <el-col :span="6" :offset="12" style="margin-bottom: 10px">
                <el-button @click="drawer(7)" type="text"> 查看车辆 </el-button>
              </el-col>
              <el-col :span="24">
                <el-divider></el-divider>
              </el-col>
              <el-col :span="24">
                <el-button @click="historical(10)">历史活动</el-button>
                <el-button
                  type="primary"
                  style="float: right"
                  @click="addActivity(10)"
                  >创建营销活动</el-button
                >
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

      <el-row>
        <MmvTitleSmall
          title="系统车型"
          style="margin-bottom: 40px; top: 20px"
        ></MmvTitleSmall>
        <el-col :span="7">
          <el-card class="box-card" style="width: 100%">
            <el-row>
              <el-col :span="24" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">车型活动</div>
              </el-col>
              <el-col :span="24" style="margin-bottom: 10px">
                <div class="cardTitle" :title="title5">
                  系统共{{ modelMarketing.modelNum }}款车型
                  {{ modelMarketing.carNum }}辆车
                </div>
              </el-col>
              <el-col :span="6" :offset="18" style="margin-bottom: 10px">
                <el-button @click="drawer(5)" type="text"> 查看车型 </el-button>
              </el-col>
              <el-col :span="24">
                <el-divider></el-divider>
              </el-col>
              <el-col :span="24">
                <el-button @click="historical(11)">历史活动</el-button>
                <el-button
                  type="primary"
                  style="float: right"
                  @click="addActivity(11)"
                  >创建营销活动</el-button
                >
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="19" :offset="1" style="margin-top: 20px">
          <el-collapse
            accordion
            style="border: 1px solid rgb(242 242 242);
              text-align: left;
              border-radius: 4px;
              background-color: rgb(242 242 242);
            "
          >
            <el-row>
              <el-col :span="24">
                <div style="color: rgb(51 51 51); margin: 10px 10px">
                  营销指南:
                </div>
              </el-col>
              <el-col :span="2">
                <i class="el-icon-info" style="margin: 10px 10px"></i>
              </el-col>
              <el-col :span="22" style="margin-bottom: 10px">
                <div style="color: rgb(163 155 155)">
                  通过系统标签分类车型，了解门店不同车型在市场的租赁情况
                </div>
                <div style="color: rgb(66 63 63)">
                  点击右上角创建活动，选择不同活动类型，发布后可多关注活动运营数据进行二次营销。
                </div>
              </el-col>
            </el-row>
          </el-collapse>
        </el-col>
      </el-row>
      <el-drawer
        title="查看车型"
        :visible.sync="drawerrentFlag"
        :direction="directionrent"
        size="50%"
        :before-close="handleClose"
      >
        <el-form
          :model="queryParamsrent"
          ref="queryParamsrent"
          inline
          label-width="68px"
        >
          <el-form-item prop="memberNo" style="margin-left: 5%">
            <el-input
              v-model="queryParamsrent.modelName"
              placeholder="车型名称"
              clearable
              size="small"
              @keyup.enter.native="handleQueryrent"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQueryrent"
              >搜索</el-button
            >
            <el-button
              icon="el-icon-refresh"
              size="mini"
              @click="resetQueryrent"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <el-table :data="rentModelMarketingList" v-loading="loadingrent">
          <el-table-column
            label="车型信息"
            align="center"
            prop="modelInfo"
            width="300"
          />
          <el-table-column
            label="车型下车辆"
            align="center"
            prop="carModelNum"
            width="180"
          />
          <el-table-column
            label="出租车辆"
            align="center"
            prop="carRentNum"
            width="180"
          />
          <el-table-column
            label="出租率"
            align="center"
            prop="rentPercentage"
            width="180"
          >
            <template slot-scope="scope">
              {{ scope.row.rentPercentage * 100 }}%
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="totalrent > 0"
          :total="totalrent"
          :page.sync="queryParamsrent.pageNum"
          :limit.sync="queryParamsrent.pageSize"
          @pagination="getrentModelMarketingList"
        />
      </el-drawer>
      <el-drawer
        title="查看车辆"
        :visible.sync="draweridleFlag"
        :direction="directionidle"
        size="50%"
        :before-close="handleClose"
      >
        <el-form
          :model="queryParamsidle"
          ref="queryParamsidle"
          inline
          label-width="68px"
        >
          <el-form-item prop="memberNo" style="margin-left: 5%">
            <el-input
              v-model="queryParamsidle.carNo"
              placeholder="车牌号/车架号"
              clearable
              size="small"
              @keyup.enter.native="handleQueryidle"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQueryidle"
              >搜索</el-button
            >
            <el-button
              icon="el-icon-refresh"
              size="mini"
              @click="resetQueryidle"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <el-table :data="idleModelMarketingList" v-loading="loadingidle">
          <el-table-column
            label="车型信息"
            align="center"
            prop="modelName"
            width="300"
          >
            <template slot-scope="scope">
              {{ scope.row.carBrandName }}/ {{ scope.row.carSeriesName }}/
              {{ scope.row.carModelName }}
            </template>
          </el-table-column>
          <el-table-column
            label="车牌号"
            align="center"
            prop="carNo"
            width="100"
          />
          <el-table-column
            label="车架号"
            align="center"
            prop="vinNo"
            width="130"
          />
          <el-table-column
            label="车辆状态"
            align="center"
            prop="carStatus"
            width="100"
          >
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.car_status"
                :value="scope.row.carStatus"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="所属门店名称"
            align="center"
            prop="belongingStoreName"
            width="180"
          />
        </el-table>
        <pagination
          v-show="totalidle > 0"
          :total="totalidle"
          :page.sync="queryParamsidle.pageNum"
          :limit.sync="queryParamsidle.pageSize"
          @pagination="getidleModelMarketingList"
        />
      </el-drawer>
      <el-drawer
        title="查看车型"
        :visible.sync="drawerModelFlag"
        :direction="directionModel"
        size="50%"
        :before-close="handleClose"
      >
        <el-form
          :model="queryParamsModel"
          ref="queryParamsModel"
          inline
          label-width="68px"
        >
          <el-form-item prop="memberNo" style="margin-left: 5%">
            <el-input
              v-model="queryParamsModel.modelName"
              placeholder="车型名称"
              clearable
              size="small"
              @keyup.enter.native="handleQueryModel"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQueryModel"
              >搜索</el-button
            >
            <el-button
              icon="el-icon-refresh"
              size="mini"
              @click="resetQueryModel"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <el-table :data="carModelList" v-loading="loadingModel">
          <el-table-column
            label="车型信息"
            align="center"
            prop="modelInfo"
            width="300"
          />
          <el-table-column label="所属部门" align="center" prop="deptName" />
          <el-table-column label="所属租户" align="center" prop="tenantName" />
          <el-table-column
            label="车辆数"
            align="center"
            prop="carModelNum"
            width="100"
          />
        </el-table>
        <pagination
          v-show="totalModel > 0"
          :total="totalModel"
          :page.sync="queryParamsModel.pageNum"
          :limit.sync="queryParamsModel.pageSize"
          @pagination="getcarModelList"
        />
      </el-drawer>
    </div>
  </div>
</template>

<script>
import {
  modelMarketingList,
  rentModelMarketingList,
  idleModelMarketingList,
  carModelList,
} from '@/api/member/member'
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import MmvTitleSmall from '@/components/MmvUI/MmvTitleSmall.vue'
import { getApplicableUnitList } from '@/api/store/store'
export default {
  components: {
    MmvTitle,
    MmvTitleSmall,
  },
  dicts: [
    'memberType',
    'memberSource',
    'memberStatus',
    'censorStatus',
    'label_classify',
    'car_status',
  ],
  data() {
    return {
      modelMarketing: {},
      // 遮罩层
      loading: true,
      title1: null,
      title2: null,
      title3: null,
      title4: null,
      title5: null,
      loadingrent: false,
      loadingidle: false,
      totalidle: 0,
      totalrent: 0,
      directionrent: 'rtl',
      directionidle: 'rtl',
      drawerrentFlag: false,
      draweridleFlag: false,
      drawerModelFlag: false,
      directionModel: 'rtl',
      totalModel: 0,
      loadingModel: false,
      // 门店数据
      storeOptions: [],
      idleModelMarketingList: [],
      rentModelMarketingList: [],
      carModelList: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        storeId: null,
      },
      // 查询参数
      queryParamsrent: {
        pageNum: 1,
        pageSize: 10,
        storeId: null,
        modelName: null,
      },
      // 查询参数
      queryParamsidle: {
        pageNum: 1,
        pageSize: 10,
        storeId: null,
        carNo: null,
      },
      // 查询参数
      queryParamsModel: {
        pageNum: 1,
        pageSize: 10,
        storeId: null,
        modelName: null,
      },
    }
  },
  created() {
    this.getModelMarketing()
    this.getAllStore()
  },
  methods: {
    drawer(type) {
      if (type == 6) {
        this.drawerrentFlag = true
        this.getrentModelMarketingList()
      } else if (type == 7) {
        this.draweridleFlag = true
        this.getidleModelMarketingList()
      } else {
        this.drawerModelFlag = true
        this.getcarModelList()
      }
    },
    handleClose(done) {
      done()
    },
    getcarModelList() {
      this.loadingModel = true
      this.queryParamsModel.storeId = this.queryParams.storeId
      carModelList(this.queryParamsModel).then((response) => {
        this.carModelList = response.rows
        this.totalModel = response.total
        this.loadingModel = false
      })
    },
    getrentModelMarketingList() {
      this.loadingrent = true
      this.queryParamsrent.storeId = this.queryParams.storeId
      rentModelMarketingList(this.queryParamsrent).then((response) => {
        this.rentModelMarketingList = response.rows
        this.totalrent = response.total
        this.loadingrent = false
      })
    },
    getidleModelMarketingList() {
      this.loadingidle = true
      this.queryParamsidle.storeId = this.queryParams.storeId
      idleModelMarketingList(this.queryParamsidle).then((response) => {
        this.idleModelMarketingList = response.rows
        this.totalidle = response.total
        this.loadingidle = false
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.storeId = null
      this.getModelMarketing()
    },
    resetQueryidle() {
      this.queryParamsidle.carNo = null
      this.getidleModelMarketingList()
    },
    resetQueryrent() {
      this.queryParamsrent.modelName = null
      this.getrentModelMarketingList()
    },
    handleQueryrent() {
      this.getrentModelMarketingList()
    },
    handleQueryidle() {
      this.getidleModelMarketingList()
    },
    resetQueryModel() {
      this.queryParamsModel.modelName = null
      this.getcarModelList()
    },
    handleQueryModel() {
      this.getcarModelList()
    },
    /** 查询部门下拉树结构 */
    getAllStore() {
      getApplicableUnitList().then((response) => {
        this.storeOptions = response.data
      })
    },
    getModelMarketing() {
      modelMarketingList(this.queryParams).then((response) => {
        this.modelMarketing = response.data
        this.title1 = '近' + this.modelMarketing.rentDayNum + '天出租率高车辆'
        this.title2 = '近' + this.modelMarketing.idleDayNum + '天闲置车辆'
        this.title5 =
          '系统共' +
          this.modelMarketing.modelNum +
          '款车型  ' +
          this.modelMarketing.carNum +
          '辆车'
      })
    },
    addActivity(marketingTarget) {
      // this.$router.push({ path: '/activityManage/add/2/' + marketingTarget })
      this.$router.push({
        name: 'activityManageAdd',
        query: { target: marketingTarget, type: 2 },
      })
    },
    historical(marketingTarget) {
      this.$router.push({
        path: '/activityManage/historical/' + marketingTarget,target
      })
    },
  },
}
</script>
<style scoped="scoped">
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}

.cardTitle {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 12px;
}
</style>
